<template>
	<s-layout  navbar="custom1" :bgStyle="{
	 color: '#F8F8F8'
	}" onShareAppMessage>
		<assNavbar :title="titleMap[state.form.bd_id]" :background="{img: 'none',BGcolor: '#fff'}"></assNavbar>
		
		
		
		
		<view class="form-box" >
			<view>
				<uni-forms ref="formRef" :modelValue="state.form" :rules="rules" label-width="120">
					<view style="margin: 20rpx 24rpx ;padding:40rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
						<view class="form-box-head-title">基础信息</view>
						<uni-forms-item label="姓名" name="name" required>
							<view class="form-box-input-item">
								<input  type="text" v-model="state.form.name" placeholder="请输入姓名" @input="setValue($event,'name')"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="手机号码" name="phone" required>
							<view class="form-box-input-item">
								<input type="number" :maxlength="11" v-model="state.form.phone" placeholder="请输入手机号码" @input="setValue($event,'phone')"/>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="所属地区" name="city" required>
							<view class="form-box-input-item" @click="state.showRegion=true">
								<view style="font-size:32rpx;">{{ state.address_txt || '请选择城市' }}</view>
								<uni-icons type="forward" size="22" color="#999999"></uni-icons>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="联系地址" name="address" required>
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.address" placeholder="请输入联系地址" @input="setValue($event,'address')"/>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="申请对象" name="type" required>
							<view class="form-box-input-item">
								<radio-group disabled @change="changeRadio" class="ss-flex flex-wrap font-1">
									<label class="uni-list-cell uni-list-cell-pd ss-flex ss-m-l-10" v-for="(item, index) in radioList" :key="item.value">
											<radio color="#003288"  style="transform: scale(0.6)" :value="item.value" :checked="state.form.type == item.value" />
										<view class="font-2" style="color:#616060">{{item.label}}</view>
									</label>
								</radio-group>
							</view>
						</uni-forms-item>
						
						
					</view>
					
					
					<view style="margin: 20rpx 24rpx 0rpx 24rpx ;padding:40rpx 30rpx 0rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
						<view class="form-box-head-title">个人信息</view>
							
						<template v-if="state.form.type==2">
							<uni-forms-item label="营业执照" name="charter" required>
								<view class="form-box-input-item-left" >
									<s-uploader v-model:url="state.form.charter" :limit="1" :sizeType="['original']" :imageStyles="{ width: '220rpx', height: '150rpx' }">
										<view style="height:150rpx; width: 220rpx;color:#777" 
										class="ss-flex ss-row-center">营业执照</view>
									</s-uploader>
								</view>
							</uni-forms-item>
							
						</template>
						
						
						
						
						
						<uni-forms-item :label="state.form.type==2?'法人身份证':'身份证'" name="id_card_front" required>
							<view class="form-box-input-item-left ss-flex justify-between" >
								<s-uploader 
								fileMediatype="image"
								v-model:url="state.form.id_card_front" 
								:limit="1" 
								:sizeType="['original']"
								:imageStyles="{ width: '220rpx', height: '150rpx' }">
									<view style="height:150rpx; width: 220rpx;color:#777" 
									class="ss-flex ss-row-center">正面</view>
								</s-uploader>
								<s-uploader v-model:url="state.form.id_card_back" :limit="1" :sizeType="['original']" :imageStyles="{ width: '220rpx', height: '150rpx' }">
									<view style="height:150rpx; width: 220rpx;color:#777" 
									class="ss-flex ss-row-center">反面</view>
								</s-uploader>
							</view>
						</uni-forms-item>
						<uni-forms-item label="银行卡号" name="bank_number" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.bank_number" placeholder="请输入银行卡号" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="开户行" name="register_bank_name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.register_bank_name" placeholder="请输入开户行" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="银行名称" name="bank_name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.bank_name" placeholder="请输入银行名称" />
							</view>
						</uni-forms-item>
						
						<template v-if="state.form.type==2">
							<uni-forms-item label="公司电话" name="company_tel" >
								<view class="form-box-input-item">
									<input type="text" v-model="state.form.company_tel" placeholder="请输入公司电话" />
								</view>
							</uni-forms-item>
							<uni-forms-item label="公司税号" name="company_tax" >
								<view class="form-box-input-item">
									<input type="text" v-model="state.form.company_tax" placeholder="请输入公司税号" />
								</view>
							</uni-forms-item>
						</template>
					</view>
				</uni-forms>
			</view>
			<view style="height:200rpx"></view>
		</view>
		
		<su-fixed bottom>
			<view class="bg-white ss-p-t-20 ss-p-b-20 ss-flex justify-center">
				<button class="btn ss-reset-button " @tap="submit()">
					提交资料
				</button>
			</view>
			
		</su-fixed>
		
	</s-layout>
	
	
	<!-- 地址选择弹窗 -->
	<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />

</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import Test from "@/sheep/helper/test.js";
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import  { clone } from 'lodash'
	
	const radioList=[
		{value:1,label:'个人'},
		{value:2,label:'公司'},
	]
	const formRef = ref(null);
	const id_card_front = ref('');
	const id_card_back = ref('');
	// 数据
	const state = reactive({
		showRegion:false,
		address_txt:'',
		edit:false,//重新提交 修改
	form:{
		id_card_front:'',//身份证正面
		id_card_back:'',//身份证反面
		type:null,
		name:'',
		phone:'',
		bd_id:null,
		city:'', 
		address:'',
		bank_number:'',
		bank_name:'',
		register_bank_name:null,
		charter:'',
		company_tel:'',
		company_tax:'',
	}
		
	});

	
 const titleMap={
	 '2':'商务BD',
	 '3':'商务BDM',
	 '4':'街道服务商',
	 '5':'区县代理',
	 '6':'地市代理',
 }
	
	const rules = {
		// 对name字段进行必填验证
		name: {
			rules: [{
					required: true,
					errorMessage: '请填写姓名',
				},
				{
					minLength: 1,
					maxLength: 6,
					errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入联系电话',
			},{
				validateFunction: (rule, value, data, callback) => {
					// 异步需要返回 Promise 对象
					return new Promise((resolve, reject) => {
						if (Test.mobile(value)) {
							resolve()
						} else {
							reject(new Error('联系电话格式错误'))
						}
					})
				}
			}]
		},
		phone: {rules: [{required: true,errorMessage: '请输入联系电话',}]},
		city: {rules: [{required: true,errorMessage: '请选择城市'}]},
		address: {rules: [{required: true,errorMessage: '请输入联系地址'}]},
		id_card_front: {
			rules: [
				{required: true,errorMessage: '请选择'},
				{
					validateFunction: (rule, value, data, callback) => {
						return new Promise((resolve, reject) => {
							if (state.form.id_card_front&&state.form.id_card_back) {
								resolve()
							} else {
								reject(new Error('请选择'))
							}
						})
					}
				}
			],
		},
		charter: {rules: [{required: true,errorMessage: '请选择'}]},
		type: {rules: [{required: true,errorMessage: '请选择申请对象'}]},
		
	}
	
	function changeRadio(e){
		console.log(e)
		state.form.type=e.detail.value
	}
	
	//选择地区
	const onRegionConfirm = (e)=>{
		console.log(e)
		state.showRegion = false;
		
		if(e.province_name=='全部'){
			return false;
		};
		
		
		
		state.address_txt =e.province_name+e.city_name+e.district_name;
		// state.form.province_id = e.province_id;
		// state.form.city_id = e.city_id;
		// state.form.district_id = e.district_id;
		state.form.city=state.address_txt
	}
	
	
	
	
	
	
	function setValue(e,name){
		console.log('e',e,'name',name)
		formRef.value.setValue(name,e.detail.value);
	}
	
	
	
	const submit = () => {
		console.log(11111,state.form)
		formRef.value.validate().then(async formVal => {
			console.log('formVal',formVal)
			const formSubmit=clone(state.form)
			var msg=null
			if(!formSubmit.id_card_front){
				msg='请选择身份证正面'
			}else if(!formSubmit.id_card_back){
				msg='请选择身份证反面'
			}else if(formSubmit.type==2&&!formSubmit.charter){
				msg='请选择营业执照'
			}
			if(msg){
				uni.showToast({
					title:msg,
					icon: 'none',
					duration: 2000
				})
				return
			}
			const res =state.edit?await sheep.$api.commission.giveaway.writeEdit(state.form.id,{
				...formSubmit,
				status:0
			}): await sheep.$api.commission.giveaway.write({
				...formSubmit
			})
			if(res.error==0){
				uni.redirectTo({
					url:`/pages/commission/merchant/result?bd_id=${state.form.bd_id}`
				})
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				})
			}
		}).catch(err => {
			console.log('err------',err);
			// uni.showToast({
			// 	title: err[0].errorMessage,
			// 	icon: 'none',
			// 	duration: 2000
			// })
		})
	}

	async function getStatus(bd_id){
		const res =await sheep.$api.commission.giveaway.cooperation({bd_id})
		state.form=res.data[0]	
		state.address_txt=state.form.city
	}
	
	onLoad(async(options) => {
		state.form.type=options.type
		state.form.bd_id=options.bd_id
		if(options.edit){
			state.edit=options.edit
			getStatus(state.form.bd_id)
		}
		
		if(options.address){
			state.form.city=options.address||''
			state.address_txt=options.address||''
		}
		if(options.street){
			state.form.address=options.street||''
		}
	})

	
	
	
	onUnload(() => {
		
	})
</script>

<style lang="scss" scoped>
	
	view {
		box-sizing: border-box;
	}
	.btn{
		  width: 702rpx;
		  height: 80rpx;
		  background: #003288;
		  border-radius: 49rpx;
		  font-size: 32rpx;
		  color: #FFFFFF;
	  }
	::v-deep {
		// .radio__inner{
		// 	border-color: #ffdfc7!important;
		// }
		// .radio__inner-icon{
		// 	border-color: #ffdfc7!important;
		// 	background-color:var(--ui-BG-5)!important;
		// }
		.uni-error-message{
			left:60rpx!important;
			padding-left:120rpx!important
		}
		
		.uni-forms-item__inner {
			padding-bottom: 20rpx
		}

		
	}

	

	


	
	.form-box {
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
		background: #F8F8F8;;
		
		position: relative;

	}
	
	.form-box-input-item-left {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		view{
			
		}
	}

	.form-box-input-item {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		input {
			padding-top:12rpx;
			font-size:32rpx;
			text-align: right;
		}
	}

	::v-deep .uni-forms-item__label {
		width:200rpx!important;
		.label-text{
			font-size:32rpx
		}
	}

	::v-deep .uni-forms-item__inner {
		padding-bottom: 0;
		padding-top:20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	

	


	.form-box-head-title{
		height: 32rpx;
		font-family: 'Source Han Sans CN';
		font-weight: bold;
		font-size: 32rpx;
		color: #323232;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 30rpx;
	}
	
	.chongwu-zhaopian{
		width:100rpx;
		height:120rpx;
	}
	
</style>